<template>
	
	<div id="contactour">
		<div class="tankuang animated  bounceInDown "></div>
		<div class="contactus" >
			<p class="title">联系我们</p>
			<div class="content">
				<input type="name" placeholder="你的姓名" id="name"/><br>
				<input type="name" placeholder="你的联系电话" id="telphone"/><br>
				<textarea placeholder="你的需要和建议" id="jianyi">
			
		</textarea>
				<button @click="tijiao">提交留言</button>
				<a href="#index">
					<img id="#index" class="returntop" src="../images/returntop.png"/>
				</a>
				
			</div>

		</div>
		<div class="phtot">
			<img src="../images/telphone.png" alt="">
			<span class="tel">13666524224</span>
			<span id="num">备案号：蜀ICP备19026076号-1</span>

		</div>
		
	
	</div>
</template>

<script>
export default{
	
	methods: {
		
		mytankuang(tip) {
			
			$('.tankuang').css('display', 'block');

			$('.tankuang').html(tip);
			var out = setTimeout(function() {

				$('.tankuang').css('display', 'none')

			}, 2000);
			return false;
		},
		checkPhone(myphone) {
		var patrn = /^((?:13|15|18|14|17)\d{9}|0(?:10|2\d|[3-9]\d{2})[1-9]\d{6,7})$/;
		if(!patrn.exec(myphone)) return false;
		return true;
		},
		tijiao() {
			var _this = this;
			var name = $('#name').val();
			var phone = $('#telphone').val();
			var jianyi = $('#jianyi').val();
			if(name !=''&& name.length < 5){
				if(_this.checkPhone(phone)){
				
					if(jianyi.length!=''){
						
//						_this.ajax.post('/app/mock/228928/lianxiwomen/v1/submit.action',{'name': name,'phone': phone,'suggestion':jianyi})
//						.then(function(data) {
//							console.log(data)
//							
//								if(data.data.code == 1001){
//									_this.mytankuang('提交成功')
//								}else{
//									_this.mytankuang('提交失败');
//							}
//						})
//						.catch(function(error) {
//							console.log(error);
//						});
					}else{
						_this.mytankuang('请输入你的需要和建议')
					}
					
				}else{
					_this.mytankuang('请输入正确的手机号码')
				}
			}else{
				_this.mytankuang('请填写真实姓名')
			}
			
			}
	}
}
</script>

<style scoped="scoped" lang="less">
.tankuang {
	position: fixed;
    top: 30%;
    left: 48%;
    width: 265px;
    height: 70px;
	background:#ACACB4;
	/*border: 1px solid #fff;*/
	text-align: center;
	line-height: 70px;
	font-size: 12 px;
	color: #fff;
	border-radius: 20px;
	letter-spacing: 1px;
	display:none;
	opacity: 1;
	z-index: 1000;

}
	.contactus {
		width: 100%;
		min-height: 570px;
		background: #44444c;
		border-bottom: 2px solid #fff;
		.title {
			text-align: center;
			line-height: 100px;
			color: #fff;
			font-style: inherit;
			font-size: 26px;
			letter-spacing: 2px;
		}
		.content {
			input {
				text-align: left;
				width: 30%;
				height: 60px;
				border:none;
				border: 1px #44444c solid;
				margin-left: 35%;
				border-color: #fff;
				background: #44444c;
				outline-style: none;
				margin-bottom: 35px;
				color: #fff;
				padding-left: 16px;
				
			}
			textarea {
				text-align: left;
				width: 30%;
				line-height: 50px;
				height: 110px;
				outline: none;
				border-color: #fff;
				margin-left: 35%;
				background:  #44444c;
				margin-bottom: 35px;
				color: #c6c5cb;
				padding-left: 16px;
			    
			}
			input::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #c6c5cb;
				
				
			}
			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #c6c5cb;
			
				
			}
			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #c6c5cb;
				
			}
			input:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #c6c5cb;
				
			}
			textarea::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #c6c5cb;
				
			}
			textarea :-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #c6c5cb;
				
			}
			textarea ::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #c6c5cb;
				
			}
			textarea :-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #c6c5cb;
				
			}
			button {
				text-align: center;
				width: 30%;
				height: 50px;
				/*border:none;*/
				margin-left: 35%;
				background: #ffac52;
				color: #fff;
				border: none;
				outline: none;
				letter-spacing: 1;
				font-size: 16px;
			}
			.returntop{
				margin-left: 28%;
			}
		}
	}
	
	.phtot {
		width: 100%;
		min-height: 90px;
		background: #44444c;
		
		box-shadow: 0 0 9px #44444c;
		display: flex;
		align-items: center;
		img {
			width: 38px;
			height: 46px;
			margin-left: 30%;
		}
		.tel {
			color: #fff;
			font-size: 20px;
			letter-spacing: 1px;
			margin-left: 1%;
		}
		#num{
			color: #fff;
			font-size: 12px;
			letter-spacing: 1px;
			margin-left: 20.5%;
			/*line-height: 90px;*/
		}
	}
</style>